<template>
  <div class="search-box">
        <p class="head_query">查询</p>
        <div class="search">
            <p>菜品名称：</p><el-input v-model="dishName" placeholder="请输入菜品名称"></el-input>
            <p>筛选：</p>
            <el-select v-model="status" placeholder="请选择">
                <el-option v-for="item in Statu" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            
            <el-button type="primary" @click="search">查询</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            dishName:'',
            Statu: [{
            value: '0',
            label: '全部'
        },  {
            value: '1',
            label: '库存过低'
        }, {
            value: '2',
            label: '库存超出'
        }],
            status: '',
           
        }
    },
    methods:{
       async search(){
            try {
                const {data:res} = await this.axios.post('/stock/list',{
                    dishName:this.dishName ,
                    status:this.status
                });
                if(res.code==200){
                let sta=res.data;
                let count=res.count;

                this.$emit('sear',{sta:sta,count:count,dishName:sta.dishName,status:this.status})
                }
            } catch (error) {
                console.error(error);
            }
        }
    }
}
</script>

<style lang="less" scoped>
    *{
        font-family: "微软雅黑";
        font-weight: 400;
        color: '#333'
    }
    .search-box{
        height: 11.5rem;
        border: 1px solid #dbe0e9 ;
        .head_query{
            display: block;
            font-weight:normal;
            font-size: 1.6rem;
            font-style:normal;
            height: 4.5rem;
            display: flex;
            align-items: center;
            padding-left: 2rem;
            background:#F2F2F2;
            border-bottom: 1px solid #dbe0e9;
        }
        .search{
                background: #fff;
                height: 7rem;
                display: flex;
                align-items: center;
                border-bottom: 1px solid #dbe0e9;
                padding-left: 3.5rem;
                p{
                     
                    display: inline-block;
                    font-size: 1.4rem;
                }
                .el-input{
                    width: 20%;
                    margin-right: 2rem;
                }
                // 查询按钮
                .el-button{
                    margin-left: 2rem;
                    padding: 1rem 2rem;
                }
            }
    }
</style>